<template>
  <div class="column gift-item" @mouseover="isOver = true" @mouseout="isOver = false">
    <img :src="imageUrl" style="width: 60px;height: 60px" />
    <div class="text-no-wrap text-center q-mt-sm">{{ item.label }}</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, PropType, computed } from 'vue';
import { ComplimentItem } from 'src/models/ComplimentItem';
export default defineComponent({
  props: {
    item: {
      type: Object as PropType<ComplimentItem>,
      required: true,
    },
    readonly: {
      type: Boolean,
      default: false,
    }
  },
  setup (props) {
    const isOver = ref(false);
    const imageUrl = computed(() => {
      if (props.readonly) {
        return props.item.normalImage;
      } else {
        if (props.item.isActive) {
          return props.item.lightImage;
        } else {
          if (isOver.value) {
            return props.item.normalImage;
          } else {
            return props.item.darkImage;
          }
        }
      }

    });
    return {
      isOver,
      imageUrl,
    };
  },
});
</script>
<style lang="sass" scoped>

.gift-item
  width: 60px
  font-size: 10px
</style>